<template>
  <div class="famous-teacher">
    <search-bar></search-bar>
    <nav-bar></nav-bar>
    <div class="page-main clearfix">
      <div class="page-left">
        <div class="xyd-container">
          <div class="xyd-c-title">资源目录</div>
          <div class="xyd-c-content">
            <el-tree
              v-if="sideCategory && sideCategory.length !== 0"
              :data="sideCategory"
              :highlight-current="true"
              :load="loadNode"
              :props="props"
              lazy
              @node-click="handleNodeClick">
            </el-tree>
          </div>
        </div>
      </div>
      <div class="page-right">
        <div class="xyd-container">
          <div class="xyd-c-title">
            <el-select
              v-model="value1"
              placeholder="筛选"
              @change="handleChange1"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span v-if="value1">
              <label>{{options1.filter(v => v.value === value1)[0].label}}评分：</label>
              <el-select
                v-model="value2"
                placeholder="筛选"
                @change="handleChange2"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </span>
            <label>课程类型：</label>
            <el-select
              v-model="value3"
              placeholder="请选择"
              @change="handleChange3"
            >
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <button class="orange-btn">我要上传</button>
          </div>
          <div class="xyd-c-content" v-loading.body="loading">
            <no-content v-if="!loading && (!course || course.length === 0)" ></no-content>
            <ul>
              <li v-for="item,i in course" :key="i">
                <teacher-item :value="item"></teacher-item>
              </li>
            </ul>
            <div class="pagination-container">
              <el-pagination
                v-if="course && course.length !== 0"
                :page-size="offset"
                layout="prev, pager, next"
                :total="total"
                :current-page="page"
                @current-change="handlePageChange"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar, SearchBar } from 'views/layout'
import { getForums } from 'api/teacher'
import { getChild } from 'api/resource'
import { NoContent } from 'components/Sit'
import TeacherItem from './teacherItem.vue'
export default {

  name: 'famous-teacher',
  components: {
    NavBar,
    SearchBar,
    TeacherItem,
    NoContent
  },
  data() {
    return {
      loading: false,
      value1: '',
      value2: '',
      value3: null,
      options1: [
        { label: '按老师', value: 'teacher' },
        { label: '按课程', value: 'course' }
      ],
      options2: [
        { label: '按评分降序', value: 'teacher_score' }
      ],
      options3: [
        { label: '名师作文', value: '0' },
        { label: '其他', value: '1' }
      ],
      sideCategory: [],
      total: 0,
      page: 1,
      offset: 5,
      props: {
        label: 'name',
        children: 'child'
      },
      course: []
    };
  },
  created() {
    // 获取课程分类
    // this.$store.dispatch('GetTops')
    // .then(res => {
    //   this.options3 = res
    // })
    // .catch(err => console.log(err))
    // 获取名师
    this.loading = true
    getForums({

    })
    .then(res => {
      console.log(res)
      this.loading = false
      this.total = res.data.page.last_page * this.offset
      this.sideCategory = res.data.cat
      this.course = res.data.course
    })
    .catch(err => {
      console.log(err)
      this.loading = false
    })
  },
  methods: {
    fetchData() {
      getForums({
        ctype: this.ctype,
        order: this.value1 || this.value2,
        page: this.page,
        offset: this.offset
      })
      .then(res => {
        console.log(res)
        this.loading = false
        this.total = res.data.page.last_page * this.offset
        this.course = res.data.course
      })
      .catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    handleChange1() {
      this.fetchData()
    },
    handleChange2() {
      this.fetchData()
    },
    handleChange3(value3) {
      this.ctype = value3
      this.fetchData()
    },
    // 左侧筛选
    handleNodeClick(data) {
      this.catid = data.value
      this.fetchData({ catid: data.id })
    },
    // 左侧筛选获取下一级
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve(this.sideCategory)
      } else {
        getChild({
          catid: node.data.id
        })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => console.log(err))
      }
    },
    handlePageChange(page) {
      this.page = page
      this.fetchData()
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.famous-teacher{
  .page-main{
    .page-left{

    }
    .page-right{
      .xyd-container{
        .xyd-c-title{
          padding: 0 10px;
          font-size: 14px;
          text-align: left;
          position: relative;
          >button{
            position: absolute;
            width: 100px;
            height: 30px;
            right: 10px;
            top: 10px;
            font-size: 14px;
          }
        }
        .xyd-c-content{
          padding: 0 40px;
          min-height: 350px;
        }
      }
    }
  }
}
</style>